<template>
  <div class="page-card handle-event">
    <h-query v-if="reload" :showKey="['title']" @search="search">
      <!-- <h-tooltip slot="btn" title="这个筛选下拉是调那个接口？还是用下面列表的接口吗。可否改成关键字搜索" /> -->
      <!-- <a-button type="primary" class="a-button-right" style="margin: 6px 0 0 0" @click.stop="show = true">手工添加</a-button> -->
    </h-query>
    <a-row :gutter="[20,20]" v-if="list.length">
      <a-table :dataSource="list" :columns="columns" row-key="id" cell-empty-content="-" :pagination="false">
        <template slot="titleTop" slot-scope="text,record">
          <div v-html="text" style="cursor:pointer;" @click="toLink(record)"></div>
        </template>
        <template slot="category" slot-scope="text">
          观察事件
        </template>
        <template slot="createBy" slot-scope="text">
          <a >{{ text }}</a>
        </template>
        <!-- <template slot="eventProc" slot-scope="text">
          <a style="color: #01A44A">{{ text === 3 ? '处置完成':'未处置' }}</a>
        </template> -->
        <template slot="action" slot-scope="text">
          <a-button type="link" @click="toDetail(text, 'gc')">查看</a-button>
        </template>
      </a-table>
      <!-- <a-col :span="8" v-for="(item, i) in list" :key="i">
        <div class="handle-event--card">
          <h1 class="ellipsis-2" @click="toLink(item, 'cz', '2')">{{ item.title }}</h1>
          <p class="tags"><span>创建人：{{ item.createBy }}</span></p>
          <p style="margin-top: 12px" class="ellipsis-2">{{ item.describe }}</p>
          !-- <div>
            <div :class="['handle-status', [5, 6].includes(item.status) ? 'ending' : '']">
              {{ item.statusText }}
            </div>
            <span v-if="item.status == 3 || item.status == 4" class="handle-more">查看数据 <a-icon type="right" /> </span>
          </div> --
          !-- <div style="opacity: 0">
            <div :class="['handle-status']">
              {{ enventProcBtn[item.eventProc] }}
            </div>
          </div> --
          !-- <div class="handle-event--tip" :style="{backgroundImage: `url(${require('@/assets/Image/icon/rect-bg.png')})`}">
            {{ eventProc[item.eventProc] }}
          </div> --
          <div class="handle-event--footer">
            <a-row :gutter="[0, 4]">
              <a-col :span="13">
                <p>创建时间：{{ moment(item.createTime).format('YYYY-MM-DD HH:mm') }}</p>
              </a-col>
              !-- <a-col :span="11">
                <p>事件进行时长：{{ item.totalTime }}小时</p>
              </a-col>
              <a-col :span="13">
                <p>指令下发数量：{{ item.commandNum || 0 }}条</p>
              </a-col>
              <a-col :span="11">
                <p>反馈数据数量：{{ item.dataNum || 0 }}条</p>
              </a-col> --

            </a-row>
          </div>
        </div>
      </a-col> -->
    </a-row>
    <a-empty v-else></a-empty>
    <div class="hlist-pagination" style="">
      <a-pagination v-model="current" v-bind="paginationConfig" @change="refresh" />
    </div>

    <createEvent v-model="show" @submit="submit" />
  </div>
</template>

<script>
import SvgIcon from '@/components/SvgIcon';
import createEvent from '../home/action/createEvent';
import { getObserveEventPageList, eventTypeId, address } from '@/api/serve';
import { replaceHTML } from '@/api/common';
import moment from 'moment';

export default {
  components: {
    SvgIcon,
    createEvent
  },
  inject: ['toDetail'],
  data() {
    return {
      moment,
      reload: false,
      show: false,
      current: 1,
      paginationConfig: {
        total: 0,
        pageSize: 20
      },
      columns: [
        {
          title: '事件标题',
          dataIndex: 'titleTop',
          key: 'titleTop',
          ellipsis: true,
          scopedSlots: { customRender: 'titleTop' }
        },
        {
          title: '事件类型',
          dataIndex: 'type',
          key: 'type',
        },
        {
          title: '事件属性',
          dataIndex: 'category',
          key: 'category',
          scopedSlots: { customRender: 'category' }
        },
        {
          title: '来源',
          dataIndex: 'source',
          key: 'source',
          scopedSlots: { customRender: 'source' }
        },
        {
          title: '属地',
          dataIndex: 'address',
          key: 'address',
        },
        {
          title: '市级部门',
          dataIndex: 'municipalDepartment',
          key: 'municipalDepartment',
        },
        {
          title: '处置发起时间',
          dataIndex: 'createTime',
          key: 'createTime',
          scopedSlots: { customRender: 'createTime' }
        },
        // {
        //   title: '处置状态',
        //   dataIndex: 'eventProc',
        //   key: 'eventProc',
        //   scopedSlots: { customRender: 'eventProc' }
        // },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' }
        }
      ],
      query: [
        {
          key: 'typeId',
          type: 'select',
          label: '事件选择',
          options: [

          ]
        },
        {
          key: 'title',
          type: 'input',
          label: '事件标题'
        },
        {
          key: 'address',
          type: 'select',
          label: '事件属地',
          options: [

          ]
        },
        {
          key: 'describe',
          type: 'input',
          label: '简介'
        }
      ],
      level: {
        // 低
        0: {
          color: '#E6C026',
          label: '低'
        },
        // 中
        1: {
          color: '#F67621',
          label: '中'
        },
        // 高
        2: {
          color: '#EE1C1C',
          label: '高'
        }
      },
      list: [],
      queryParams: {
        pageNo: 1,
        pageSize: 20
      },
      eventProc: {
        0: '进行中',
        1: '进行中',
        2: '进行中',
        3: '已完结',
        5: '已存档'
      },
      enventProcBtn: {
        0: '发起任务',
        1: '领导指示',
        2: '处置过程',
        3: '事件完结',
        4: '转为应急',
        5: '事件存档'
      }
    };
  },
  created() {
    this.getType();
    this.getList();
    this.address();
  },
  methods: {
    search(params) {
      console.log('search', params);
      this.queryParams = { ...this.queryParams, ...params };
      this.current = params.pageNo;
      this.getList();
    },
    submit(form) {
      this.getList();
    },
    address() {
      address().then(res => {
        this.query[2].options = [{
            label: '全部',
            value: ''
          }].concat(res.data.map(e => {
            return {
              label: e.title,
              value: e.title
            };
          }));
      });
    },
    getType() {
      eventTypeId().then(res => {
        this.reload = true;
        this.query[0].options = [{
            label: '全部',
            value: ''
          }].concat(res.data.map(e => {
            return {
              label: e.name,
              value: e.id
            };
          }));
      });
    },
    getList() {
      getObserveEventPageList(this.queryParams).then(res => {
        this.list = res.data.records.map(e => {
          return {
            ...e,
            titleTop: e.title,
            content: (typeof e.content == 'string') ? replaceHTML(e.content) : ''
          };
        });
        this.paginationConfig.total = res.data.total;
      });
    },
    getListAll() {

    },
    refresh(page) {
      console.log(page);
      this.queryParams.pageNo = page;
      this.getList();
    },
    toLink({ link }) {
      if (link) {
        window.open(link);
      } else {
        this.$message.warning('暂无链接');
      }
    }
  }
};
</script>

<style scoped lang="less">
  h1,p {
    margin: 0;
  }
  .handle-event {
    .a-button-blue {
      position: absolute;
      right: 0;
      top: 0;
    }
    .handle-event--card {
      background: #FFFFFF;
      box-shadow: 0px 0px 20px 0px rgba(20,15,41,0.1000);
      padding: 20px 20px;
      position: relative;
      border-radius: 10px;
      height: 240px;
      // padding-bottom: 93px;
      overflow: hidden;
      h1 {
        font-size: 20px;
        font-weight: 500;
        color: #333333;
        cursor: pointer;
        margin-top: 12px;
        cursor: pointer;
        &:hover {
          color: #3174FE;
        }
      }
      >p.tags {
        margin-top: 0;
        >span:first-child {
          font-size: 14px;
          font-weight: 400;
          color: #666666;
          margin-right: 12px;
        }
        >span:last-child {
          font-size: 14px;
          font-weight: 400;
          color: #666666;
        }
      }
      >p {
        font-size: 15px;
        font-weight: 400;
        color: #999999;
        line-height: 1.5;
        margin-top: 8px;
      }
      .handle-event--footer {
        margin-top: 20px;
        position: absolute;
        bottom: 20px;
        width: 90%;
        p {
          font-size: 14px;
          font-weight: 400;
          color: #999;
        }
      }
      .handle-event--action {
        width: 100%;
        height: 73px;
        background: rgba(49, 116, 254, 0.1);
        font-size: 18px;
        font-weight: 400;
        color: #1F3B8A;
        line-height: 73px;
        text-align: center;
        position: absolute;
        bottom: 0;
        left: 0;
        cursor: pointer;
        .delete-icon {
          position: absolute;
          right: 20px;
          font-size: 30px;
          top: 50%;
          transform: translate(0, -50%);
          cursor: pointer;
          &:hover {
            color: red;
          }
        }
      }
      .handle-event--tip {
        position: absolute;
        right: 0;
        top: 0;
        width: 98px;
        height: 36px;
        color: #fff;
        text-align: center;
        text-indent: 4px;
        line-height: 36px;
      }
    }
    .hlist-pagination {
      margin: 20px 0;
      text-align: center;
      margin-top: 80px;
    }
    .handle-status {
      // width: 82px;
      display: inline-block;
      padding: 0 12px;
      height: 33px;
      background: rgba(49, 116, 254, 0.1);
      border-radius: 10px;
      font-size: 14px;
      font-weight: 500;
      color: #3174FE;
      text-align: center;
      line-height: 33px;
      margin-top: 12px;
      &.ending {
        color: #fff;
        background: #1F3B8A;
      }
    }
    .handle-more {
      color: #3174FE;
      margin-left: 12px;
      cursor: pointer;
    }
  }
</style>
